<!--
 * @Description: 
 * @Author: 赵华宇
 * @Date: 2024-11-13 15:19:19
 * @LastEditors: 赵华宇
 * @LastEditTime: 2024-11-13 17:05:13
-->
 <!-- 页面结构 -->
<template>
    <div :style="{'font-size': fontsize+'px'} ">
        <!-- num:{{ num }} -->
        count:{{ count }}
        <button @click="count++">count++</button>
        <button @click="ChildAddFont">fontsize++</button>
        <button @click="fontsize--">fontsize--</button>
    </div>
</template>
<!-- js -->
 <script setup>
 import { ref } from 'vue';
 const count = ref(0);
 const fontsize = ref(20);
 const props=defineProps(['num']);
 count.value=props.num;
 //增加字体大小
 function childAddFont() {
     console.log("🚀 ~ childAddFont ~ childAddFont:");
     fontsize.value++;
 }
 //减小字体大小
 function childSubFont() {
     console.log("🚀 ~ childSubFont ~ childSubFont:");
     fontsize.value--;
 }
 //暴露方法给父组件
 defineExpose({ childAddFont , childSubFont })
 </script>
 <!-- 样式 -->
  <!-- scoped是为了当前组件样式不要影响其他组件 -->
  <style scoped>
</style>